<template>
  <v-container>
    <div style="margin-top: -2.2vh">
		<div style="font-size: 32px;">辟谣</div>
		<!--
      <div style="width: 500px">
        <v-text-field
          outlined
          hide-details="auto"
          style="margin-left: 2%; margin-right: 2%"
          v-model="keyword"
        />
      </div>
      <v-btn style="" color="primary" large @click="getList">
        <v-icon>mdi-magnify</v-icon>搜索</v-btn
      >-->
    </div>
	<v-row dense style="margin-top: 1vh;">
		<v-col v-for="(item, i) in items" :key="i" cols="12">
			<v-card :color="color" light min-height="7vh" style="box-shadow: none" @click="GoToURL(item.extLink)" >
				<v-row>
					<v-col style="font-size: 24px;" cols="9">
						{{item.title}}
					</v-col>
					<v-col style="font-size: 18px; color: #b5b5b5;font-family: 微软雅黑">
						{{item.pubDate.substring(0,10)}}
					</v-col>
				</v-row>
			</v-card>
		</v-col>
	</v-row>
	<!--
    <div class="content-area" style="">
      <v-row dense style="margin-top: 1vh">
        <v-col v-for="(item, i) in items" :key="i" cols="12">
          <v-card :color="color" light>
            <div class="d-flex flex-no-wrap justify-space-between">
              <div>
                <v-card-title
                  class="text-h5"
                  v-text="item.title"
                ></v-card-title>


                <MetaCard :source="item.source" :pubDate="item.pubDate.substring(0,10)"/>

                <v-card-actions>
                  <v-btn
                    v-if="item.extId === null"
                    color="primary"
                    text
                    @click="goToSelf"
                  >
                    阅读全文
                  </v-btn>
                  <v-btn
                    v-else
                    color="primary"
                    text
                    @click="GoToURL(item.extLink)"
                    >阅读全文</v-btn
                  >
                  <v-menu offset-y v-if="isManager">
                    <template v-slot:activator="{ on, attrs }">
                      <v-btn color="primary" dark v-bind="attrs" v-on="on">
                        操作
                      </v-btn>
                    </template>

                    <v-list>
                      <v-list-item @click="removepassage(item, i)">
                        <v-list-item-title>删除</v-list-item-title>
                      </v-list-item>
                      <v-list-item
                        @click="edit(item)"
                        v-if="item.extId == null"
                      >
                        <v-list-item-title>编辑</v-list-item-title>
                      </v-list-item>
                    </v-list>
                  </v-menu>
                </v-card-actions>
              </div>

              <v-avatar class="ma-3" size="150" tile>
                <v-img
                  v-if="item.extObj.keyword === '真相'"
                  src="@/assets/Refutation_true.svg"
                ></v-img>
                <v-img v-else src="@/assets/Refutation_false.svg"></v-img>
              </v-avatar>
            </div>
          </v-card>
        </v-col>
      </v-row>
    </div>
    <div class="text-center">
      <v-container>
        <v-row justify="center">
          <v-col cols="8">
            <v-container class="max-width">
              <v-pagination
                @input="getList"
                v-model="pageCount"
                :length="totalCount"
                :total-visible="6"
              ></v-pagination>
            </v-container>
          </v-col>
        </v-row>
      </v-container>
    </div>
    -->
  </v-container>
</template>

<script>

export default {
  name: "Refutation",
  components:{},
  data: () => ({

    pageCount: 1, //分页请求的页码
    totalCount: 1, //返回的辟谣详情的总条数
    //totalCount是每次请求后后端返回的存在与数据库中符合条件的数据条数总数
    limitCount: 30, //分页请求一次请求的数据条数
    keyword: "",
    color: "#FFFFFF",
    items: [],
  }),
  created() {
    this.getList();
  },
  computed:{
    isManager(){
      return this.$store.getters.isManager;
    }
  },
  methods: {
    GoToURL(url) {
      window.open(url, "_blank"); // 新窗口打开外链接
    },
    getList() {
      this.$api.article
        .getRumors(this.pageCount - 1, this.limitCount, this.keyword)
        .then((res) => {
          let result = res;
          console.log(result);
          if (result.success) {
            this.items = result.data;
            // this.pageCount += 1
            this.totalCount = result.totalPage; //总条数
          } else {
            this.$Message.error("获取辟谣文章失败，原因：" + res.exc);
          }
        });
    },
    removepassage(item) {
      this.$api.article
        .delete(item.id)
        .then((res) => {
          let result = res;
          if (result.success) {
            // this.Refutations.splice(i, 1);
            this.getList();
            this.$Message.success("删除成功");
          } else {
            this.$Message.error("删除失败,出现了意料之外的错误");
          }
        })
        .catch(function (error) {
          console.log(error);
          this.$Message.error("请求失败,出现了意料之外的错误");
        });
    },
    edit(item) {
      this.$router.push("/manage/article/edit/" + item.id);
    },
  },
};
</script>

<style scoped>
.tool-bar {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

</style>
